import React, { useState } from 'react';

import { Breadcrumb, Button, Layout, Menu, Select, theme } from 'antd';
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { childrenRouter } from './router';
const { Header, Content, Footer, Sider } = Layout;


function App() {
  const {pathname}=useLocation()
  const navigate=useNavigate()
  const erji=(arr,parentPath='')=>{
    return arr.map((item)=>{
      const furllpath=parentPath?`${parentPath}/${item.path}`:item.path
      return{
        key:furllpath,
        label:item.title,
        children:item.children?erji(item.children,furllpath):null
      }
    })
  }
  const items=erji(childrenRouter)

  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <div>
      <Layout style={{ minHeight: '100vh' }} >
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
          <div className="demo-logo-vertical" />
          <Menu theme="dark" 
          defaultSelectedKeys={[pathname]} 
          mode="inline" 
          items={items}
          onClick={({key})=>navigate(key)}
           />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: localStorage.getItem('username')?'昵称：'+localStorage.getItem('username'):'未登录'}, { title: <img style={{width:'50px',height:'50px',borderRadius:'50%'}} src={localStorage.getItem('img')?localStorage.getItem('img'):''}/> }]} />
            <div
              style={{
                padding: 24,
                minHeight: 360,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            >
              <Outlet />
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©{new Date().getFullYear()} Created by Ant UED
          </Footer>
        </Layout>
      </Layout>

       <Select
            style={{width: 120 , position: 'fixed', top: 0, right: 80 }}
                defaultValue="白天"
                // style={{ }}
                // onChange={huan}
                options={[
                    { value: 'lingt', label: '白天' },
                    { value: 'dark', label: '黑夜' },
                    
                ]}
            />

            <Button style={{ position: 'fixed', top: 0, right: 0 }} >中/Eng</Button>
       
    </div>
  )
}

export default App
